<template>
  <a-card class="canvas flex-1" :body-style="{ height: '100%', padding: '0' }">
    <div class="h-[100%] flex flex-col w-[100%] px-4">
      <div class="flex justify-between head p-4 items-center">
        <div class="font-bold text-[1.5rem]">预览图</div>
        <div class="flex gap-4">
          <div class="flex gap-2 items-center">
            <span class="text-gray-400">基站：</span>
            <StationOptions
              class="w-[120px]"
              type="select"
              v-model:model-value="distributionConfig.stationId"
            ></StationOptions>
          </div>
          <a-button-group>
            <a-button @click="previewImage" :disabled="!distributionConfig.templateId">
              预览
            </a-button>
            <a-button
              type="primary"
              @click="distribution"
              :disabled="!distributionConfig.templateId || !distributionConfig.tagCode"
            >
              下发
            </a-button>
          </a-button-group>
        </div>
      </div>
      <div class="flex flex-1 justify-center items-center w-[100%]">
        <div v-if="!distributionConfig.templateId" class="w-[60%]">
          <a-steps
            direction="vertical"
            @change="changeStep"
            :current="currentStep"
            :items="distributionSteps"
          ></a-steps>
        </div>
        <div class="preview w-[100%] h-[100%] flex justify-center items-center" v-else>
          <a-spin :spinning="loading" class="w-[100%] h-[100%]">
            <a-image :src="imageSrc" />
          </a-spin>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { preview, saveAndSend } from '@/api/modules/esl/priceTag';
import { distributionSteps, currentStep, distributionConfig } from '../data/data';
import { screenList } from '../screen/screen';
import { notify } from '@/utils/common/common';

const imageSrc = ref();
const loading = ref(false);
const emit = defineEmits(['changeStep']);
const previewImage = async () => {
  if (!distributionConfig.value.templateId) return;
  loading.value = true;
  const { data } = await preview({
    goodsList: screenList.value,
    templateId: distributionConfig.value.templateId,
    tagCode: distributionConfig.value.tagCode,
  });
  loading.value = false;
  imageSrc.value = data.data;
};
/* 下发 */
const distribution = async () => {
  const { data } = await saveAndSend({
    tagId: distributionConfig.value.tagId,
    templateId: distributionConfig.value.templateId,
    goodsId: distributionConfig.value.productId,
    stationId: distributionConfig.value.stationId,
    goodsList: screenList.value,
  });
  notify(data);
};

const changeStep = (current: number) => {
  emit('changeStep', current);
};
watch(
  distributionConfig,
  () => {
    previewImage();
  },
  { immediate: true, deep: true },
);
</script>

<style lang="scss" scoped>
.canvas {
  box-shadow: none;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  min-width: 30vw;
  .head {
    border-bottom: 1px solid var(--border-color);
  }
}
.preview {
  background: var(--background-color);
}
</style>
